<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <h3 style="text-align: center">材料库</h3>
  <div id="MaterialChart" style="width: 100%;height: 300px;"></div>
</template>

<script setup>
// import * as VChart from '@visactor/vchart';
import VChart from '@visactor/vchart';
import { getMaterialCountData } from '@/api/assetManagement';
const CONTAINER_ID = ref('MaterialChart');
const chartData = ref([]);
const renderChart = () => {
  const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: chartData.value
    }
  ],
  outerRadius: 0.8,
  valueField: 'count',
  categoryField: 'materialName',
  title: {
    visible: true,
    text: ''
  },
  legends: {
    visible: true,
    orient: 'left'
  },
  label: {
    visible: true
  },
  tooltip: {
    mark: {
      content: [
        {
          key: datum => datum['materialName'],
          value: datum => datum['count']
        }
      ]
    }
  }
};

  const vchart = new VChart(spec, { dom: CONTAINER_ID.value });
  vchart.renderSync();

  // Just for the convenience of console debugging, DO NOT COPY!
  window['vchart'] = vchart;
}

const getMaterialCount = async () => {
  await getMaterialCountData().then(res => {
    chartData.value = res.data;
    renderChart();
  })
}   
 
onMounted(() => {
  getMaterialCount();                           
});                                                                                   
                                                         
</script>

<style lang="scss" scoped>

</style>